<template>
  <div class="pie">
    <div ref="pie" class="chart"></div>
    <ul class="legend">
      <li v-for="(item, index) in data" :key="index">
        <div :style="{background:colorArray[index][1]}"></div>
        <span>{{ item.name }}</span>
        <span>{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onBeforeUnmount, watch } from 'vue';
import * as eCharts from 'echarts';
import { getScale } from './ChartUtils';

const pie = ref(null);

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  colorArray: {
    type: Array,
    default: () => [
      ['#0F3B75', '#4280D1', '#196AD5'],
      ['#0F3558', '#0F5BA1', '#0E4C86'],
      ['#134A7E', '#488AC6', '#1890FF'],
      ['#105798', '#1678D3', '#1173CE'],
      ['#3779A3', '#48AAEB', '#67BBF3'],
      ['#4C6DAC', '#79A5FC', '#94B6F8'],
      ['#0C95AF', '#00D6FF', '#1FD0F3']
    ]
  },
  serieName: {
    type: String,
    default: ''
  },
    /**文字大小 */
  fontSize:{
    type: Number,
    default: 14
  }
});

watch(() => props.data, (v) => {
  if (chart) {
    const { serieName } = props;
    const option = getOption(serieName, v);
    chart.setOption(option, true);
  }
});

let chart;
onMounted(() => {
  const pieDom = pie.value;
  chart = eCharts.init(pieDom);
  const { data, serieName } = props;
  if (data.length > 0) {
    const option = getOption(serieName, data)
    chart.setOption(option, true);
  }
   window.addEventListener('resize', resize);
});

/**组件取消挂载之前 */
onBeforeUnmount(()=>{
  window.removeEventListener('resize', resize);
})

/**图表大小变化重新渲染 */
const resize = () =>{
  if (chart) {
    const { serieName, data } = props;
    let option = getOption(serieName, data);
    chart.setOption(option, true);
    chart.resize();
  }
}
/**获取图表配置 */
const getOption = (serieName, data) => {
  const option = {
    tooltip: {
      trigger: 'item'
    }
  };
  const series = getSeries(serieName, data);
  option['series'] = series;
  return option;
}

/**
 * 深度合并对象
 */
const deepObjectMerge = (targ, source) => {
  const target = targ;
  for (const key in source) {
    if (key.hasOwnProperty) {
      target[key] =
        target[key] && typeof target[key] === 'object'
          ? deepObjectMerge(target[key], source[key])
          : (target[key] = source[key]);
    }
  }
  return target;
};
/**
 * 组装图表series值
 */
const getSeries = (name, data) => {
  const _data = data.map((item, index) => {
    return {
      itemStyle: {
        color: getLinearColor(props.colorArray[index])
      },
      label: {
        position: 'inside',
        color: 'white',
        fontSize: getScale()*12
      },
      ...item
    };
  });
  return [
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['10%', '78.5%'],
      data: _data,
      name,
      z: 10
    },
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['10%', '78.5%'],
      data: [{
        value: 1,
        itemStyle: {
          color: 'rgba(0,0,0,0)',
          borderWidth: getScale()*10,
          borderColor: 'rgba(252,203,255, 0.1)'
        }
      }]
    },
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['10%', '78.5%'],
      data: [{
        value: 1,
        itemStyle: {
          color: 'rgba(0,0,0,0)',
          borderWidth: getScale()*16,
          borderColor: 'rgba(252,203,255, 0.1)'
        }
      }]
    }
  ];
};
/** 获取渐变色配置 */
const getLinearColor = (colorArray) => {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      { offset: 0, color: colorArray[0] },
      { offset: 0.5, color: colorArray[1] },
      { offset: 1, color: colorArray[2] }
    ]
  };
};
</script>
<style lang="less" scoped>
.pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.chart {
  width: 48%;
  height: 100%;
}

.legend {
  width: 42%;
  height: 100%;
  overflow: hidden;
  list-style: none;
  padding: 0 0.625rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.legend > li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legend div {
  width: 0.875rem;
  height: 0.875rem;
}
</style>
